/*
 * @Overview:   Global mixins
 * @Author:     Zi_Jun
 * @Email:      zijun2030@163.com
 * @Date:       2020/12/4 16:51
 * @Mark:       //
 */

/*========================================
Layout
e.g.: @include wh(20px)
========================================*/
@mixin wh($w, $h:$w) {
width: $w;
height: $h;
}

@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}


/*========================================
Ellipsis
e.g.: @include ell()
========================================*/
@mixin ell {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

@mixin ell2($num: 2) {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $num;
  overflow: hidden;
}

/*========================================
Gradient
e.g.: @include gradient(to right, red, yellow)
========================================*/
@mixin gradient($direction: to right, $leftColor, $rightColor) {
  background-image: linear-gradient($direction, $leftColor, $rightColor);
  background-image: -webkit-linear-gradient($direction, $leftColor, $rightColor);
  background-image: -o-linear-gradient($direction, $leftColor, $rightColor);
}

/*========================================
Opacity
e.g.: @include opacity(.5)
========================================*/
@mixin opacity($value) {
opacity: $value;
$value-ie: $value * 100;
filter: alpha(opacity=$value-ie);
}

/*========================================
Border
e.g.: @include bottom-line(red)
========================================*/
@mixin bottom-line($color: $gray-4) {
  position: relative;
  &:before {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    box-sizing: border-box;
    height: 1px;
    border-bottom: 1px solid $color;
    transform-origin: 0 0;
    transform: scaleY(0.5);
  }
}
@mixin border-line($color: $gray-4) {
  position: relative;
  border: none;
  &:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    box-sizing: border-box;
    width: 200%;
    height: 200%;
    border: 1px solid $color;
    transform-origin: 0 0;
    transform: scale(.5, .5);
  }
}